<template>
  <div>
  <vheader></vheader>

  <div class="cart">
    <div class="two">
      <h2>我的购物车</h2>
      <p v-show="!products.length" class="emptyCar"><i>购物车空空如也！</i></p>

      <!--<ul>-->
      <table v-if="products.length" ref="table">
        <tbody>
        <tr>
          <th class="th_info">商品信息</th>
          <th class="th_price">单价</th>
          <th class="th_amount">数量</th>
          <th class="th_sum">金额</th>
          <th class="th_op">操作</th>
        </tr>
        <tr v-for="p in products">
          <td class="td_item">
            <div class="s_img">
              <img :src="p.src"><p>{{p.title}}</p>
            </div>
          </td>
          <td class="td_price">
            {{p.price | currency}}
          </td>
          <td class="td_amount">
            <div>
              <!--<span class="subtract" @click="changeNumSub(index)" :class="{disabled:single.num<=1}">-</span>-->
              <p>{{ p.quantity }}</p>
              <p class="td_sum">￥{{(p.price | currency)*(p.quantity)}}</p>
            </div>
          </td>
          <!--<td class="td_sum">￥{{p.price | currency}}</td>-->
          <td class="td_op"><span @click="remove(index)">删除</span></td>
        </tr>
        </tbody>
      </table>


    </div>
    <hr>
    <p class="total">Total: {{ total | currency }}</p>
    <p><button :disabled="!products.length" @click="checkout(products)" class="j">结账</button></p>
    <br><br><br>
    <p v-show="checkoutStatus" class="check">Checkout {{ checkoutStatus }}.</p>

  </div>

  <vfooter></vfooter>
  </div>
</template>

<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

<script>
  import { mapGetters, mapActions } from 'vuex'
  import vheader from "./header.vue"
  import vfooter from "./footer.vue";
  //import { remove } from '../store/actions'

  export default {
    name: 'Cart',
    components:{
      vfooter, vheader
    },
    vuex: {
      getters: {
        cart: ({
          index
        }) => index.cart
      }
    },
//  actions: {
//    removeItem
//  },

    data () {
      return {}
    },
    computed: {
      ...mapGetters({
        products: 'cartProducts',
//      productCount: 'Cart_getCartCount',
        checkoutStatus: 'checkoutStatus'
      }),
      total () {
        return this.products.reduce((total, p) => {
          return total + p.price * p.quantity
        }, 0)
      }
    },
    methods: {
      checkout (products) {
        this.$store.dispatch('checkout', products)
      },
      ...mapActions([
        // 映射 this.addToCart() 为 this.$store.dispatch('addToCart')
        'remove'
      ]),
      remove(index){
        this.$store.dispatch('remove', index)
      }

    }
  }
</script>

